<!DOCTYPE html>
<html lang="-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
				content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>航空订票系统</title>
	<link rel="stylesheet" type="text/css" href="admin/lib/layui-v2.5.5/css/layui.css">
	<link rel="stylesheet" type="text/css" href="admin/css/main.css">
	<!--加载meta IE兼容文件-->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	<style>
		.layui-table-cell { height: auto;}
		.layui-table tbody tr:hover { background-color: white;}
		.icon{ display: inline-block; background:url(admin/images/icon.png) no-repeat 9999px 9999px;}
		.icon_plane-departure{ width:25px; height:20px; background-position:0px 0px;}
		.icon_plane-arrival{ width:25px; height:20px; background-position:-35px 0px;}
		.icon_right{ width:20px; height:20px; background-position:-70px 0px;}
		.air-name{ font-weight: bolder;color: #858796;font-size: 16px;}
	</style>
</head>
<body>
<div class="header">
	<div class="menu-btn">
		<div class="menu"></div>
	</div>
	<h1 class="logo">
		<a href="index.html">
			<span>航空订票系统</span>
			<img src="admin/images/favicon.ico" height="60px">
		</a>
	</h1>
	<div class="nav">
		<a href="index.html" class="active">航班查询</a>
		<a href="about.html">关于</a>
	</div>
	<ul class="layui-nav header-down-nav">
		<li class="layui-nav-item"><a href="index.html" class="active">航班查询</a></li>
		<li class="layui-nav-item"><a href="about.html">关于</a></li>
	</ul>
	<p class="welcome-text">
		<span id="username"></span>
	</p>
</div>

<div class="banner">
	<div class="cont w1000" style="padding-top: 30px;padding-bottom: 30px;">

		<div class="layui-tab layui-tab-card" style="max-width: 800px;margin: 0 auto;background-color: white;">
			<ul class="layui-tab-title">
				<li class="layui-this">按城市查询</li>
				<li>按航班号查询</li>
			</ul>
			<div class="layui-tab-content" style="min-height: 80px;">
				<div class="layui-tab-item layui-show">
					<div style="margin: 3px;">
						<form class="layui-form layui-form-pane" onsubmit="return false">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">出发机场</label>
									<div class="layui-input-inline">
										<select name="start_city_id" id="start_city_id">
											<option value="">请选择</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">终点机场</label>
									<div class="layui-input-inline">
										<select name="end_city_id" id="end_city_id">
											<option value="">请选择</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">日期</label>
									<div class="layui-input-inline">
										<input lay-verify="required" name="date" id="date1" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
										class="layui-icon"></i> 搜 索
									</button>
								</div>
							</div>
						</form>
					</div>
				</div>
				<div class="layui-tab-item">
					<div style="margin: 3px;">
						<form class="layui-form layui-form-pane" onsubmit="return false">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">航班号</label>
									<div class="layui-input-inline">
										<input lay-verify="required" name="flight_no" id="flight_no" autoComplete="off"
													 class="layui-input"/>
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">日期</label>
									<div class="layui-input-inline">
										<input lay-verify="required" name="date" id="date2" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
										class="layui-icon"></i> 搜 索
									</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<div class="layui-card" style="max-width: 800px;margin: 5px auto;background-color: white;">
			<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

			<script type="text/html" id="titleTpl">
				<blockquote class="layui-elem-quote">
					<div class="layui-row" style="text-align: center;margin: 20px 0;">
						<div class="layui-col-md2 layui-col-sm2">
							<div>
								<p class="air-name" style="color: #4E73E5;">{{d.flight_no}}</p>
								<p style="color: #4E73E5;">{{d.model_name}}</p>
							</div>
						</div>
						<div class="layui-col-md2 layui-col-sm2">
							<p class="air-name"><i class="icon icon_plane-departure"></i><span>{{d.estimated_takeoff_time.substr(0,16)}}</span></p>
							<p>{{d.start_airport}}</p>
						</div>
						<div class="layui-col-md2 layui-col-sm2" style="margin-top: 20px;">
							<i class="icon icon_right"></i><i class="icon icon_right"></i>
						</div>
						<div class="layui-col-md2 layui-col-sm2">
							<p class="air-name"><i class="icon icon_plane-arrival"></i><span>{{d.estimated_arrival_time.substr(0,16)}}</span></p>
							<p>{{d.end_airport}}</p>
						</div>
						<div class="layui-col-md2 layui-col-sm2 air-name" style="color: orange;text-align: right;">
							<strong>￥{{d.execution_price}}</strong>
						</div>
					</div>
					{{#  layui.each(d.ticketTypes, function(index, t){ }}
					<hr/>
					<div class="layui-row" style="margin: 3px 0;">
						<div class="layui-col-md3">
								{{t.cabin}}
						</div>
						<div class="layui-col-md2 layui-col-sm2">
							改退签规则 <i class="layui-icon layui-icon-tips" title="{{t.rules}}&#10;行李限重：{{t.luggage_limit}}"></i>
						</div>
						<div class="layui-col-md2 layui-col-sm2">
							￥{{t.basic_price}}
						</div>
						<div class="layui-col-md2 layui-col-sm2">
							余票：{{t.remaining_tickets}}
						</div>
						<div class="layui-col-md3">
							<button class="layui-btn layui-btn-sm {{t.remaining_tickets>0? '':'layui-btn-disabled'}}" tid="{{t.id}}" lay-event="book">预订</button>
						</div>
					</div>
					{{#  }); }}
				</blockquote>
			</script>

		</div>
	</div>
</div>


<div class="footer-wrap" style="text-align: center;padding: 20px;color: #858796;font-size: 18px;">
	<span style="">Copyright ©  2021</span>
</div>
<script type="text/javascript" src="admin/lib/layui-v2.5.5/layui.js"></script>
<script type="text/javascript">
	layui.config({
		base: 'admin/js/util/'
	}).use(['element', 'jquery', 'menu', 'form', 'table', 'laydate'], function () {
		var element = layui.element,
			form = layui.form,
			table = layui.table,
			laydate = layui.laydate,
			$ = layui.$,
			menu = layui.menu;

		(function () {
			laydate.render({elem: '#date1'});
			laydate.render({elem: '#date2'});

			var user = layui.sessionData('user');
			if (user && user.id) {
				$('#username').html('欢迎您，'+user.name+' | <a style="color: #1295D8" class="login-out">登出</a>');
				$('.login-out').on("click", function () {
					$.get('/api/logout', function () {
						layer.msg('退出登录成功', function () {
							sessionStorage.clear();
							window.location = '/';
						});
					})
				});
			} else {
				$('#username').html('<a style="color: #1295D8" href="register.html">注册</a> | <a style="color: #1295D8" href="login.html">登录</a>');
				$('.header-down-nav').append('<li class="layui-nav-item"><a href="register.html">注册</a></li><li class="layui-nav-item"><a href="login.html">登录</a></li>');
			}

			$.ajax({
				url: "/api/City",
				type: "GET",
				dataType: "json",
				async: false,
				success: function (res) {
					if (res.code == 0) {
						var selectEl1 = $('#start_city_id').empty().append(new Option("请选择", ""));
						$.each(res.data, function (index, item) {
							selectEl1.append(new Option(item.name, item.id));
						});
						var selectEl2 = $('#end_city_id').empty().append(new Option("请选择", ""));
						$.each(res.data, function (index, item) {
							selectEl2.append(new Option(item.name, item.id));
						});
						form.render("select");
					}
				},
			});

			menu.init();
		})();

		form.on('submit(data-search-btn)', function (data) {
			console.log(data.field);
			table.render({
				elem: '#currentTableId',
				url: '/api/queryFlight',	// ** url
				where: data.field,
				cols: [[
					{title: '查询结果', templet: '#titleTpl'},
				]],
				limits: [10, 20, 50, 100],
				limit: 10,
				skin: 'nob',
				page: true
			});

			table.on('tool(currentTableFilter)', function (obj) {
				var data = obj.data;
				if (obj.event === 'book') {
					window.location = 'user/book1.html?tid='+$(this).attr('tid');
				}
			});
		});
	})
</script>
</body>
</html>
